<div class="tlp-table-actions">
    <button type="button" class="tlp-button-primary tlp-table-actions-element"><i class="tlp-button-icon fa fa-plus"></i> Add user</button>
    <button type="button" class="tlp-button-primary tlp-button-outline tlp-table-actions-element"><i class="fa fa-download"></i> Export CSV</button>
</div>
<table class="tlp-table">
    <thead>
        <tr>
            <th class="tlp-table-cell-numeric">
                <a href="javascript:;">Id</a>
            </th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th><a href="javascript:;" class="tlp-table-sort">
                Status <i class="fa fa-caret-down tlp-table-sort-icon"></i>
            </th>
            <th class="tlp-table-cell-numeric">Age</th>
            <th class="tlp-table-cell-numeric">Price</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="tlp-table-cell-section" colspan="7">Podium</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">1</a>
            </td>
            <td>Allen</td>
            <td>Woody</td>
            <td>
                <span class="tlp-badge-success tlp-badge-outline">Active</span>
            </td>
            <td class="tlp-table-cell-numeric">34</td>
            <td class="tlp-table-cell-numeric">$950.50</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-danger tlp-button-outline" href="javascript:;">
                    <i class="fa fa-trash-o"></i> Remove
                </a>
            </td>
        </tr>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">8</a>
            </td>
            <td>Brian</td>
            <td>Wilson</td>
            <td>
                <span class="tlp-badge-danger tlp-badge-outline">Disabled</span>
            </td>
            <td class="tlp-table-cell-numeric">49</td>
            <td class="tlp-table-cell-numeric">$12</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-danger tlp-button-outline" href="javascript:;">
                    <i class="fa fa-trash-o"></i> Remove
                </a>
            </td>
        </tr>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">149</a>
            </td>
            <td>John</td>
            <td>Bonham</td>
            <td>
                <span class="tlp-badge-warning">
                    <i class="tlp-badge-icon fa fa-warning"></i> Unknown
                </span>
            </td>
            <td class="tlp-table-cell-numeric">28</td>
            <td class="tlp-table-cell-numeric">$1 250</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-danger tlp-button-outline" href="javascript:;">
                    <i class="fa fa-trash-o"></i> Remove
                </a>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="tlp-table-cell-section" colspan="7">Others</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">54</a>
            </td>
            <td>June</td>
            <td>Carter</td>
            <td>
                <span class="tlp-badge-success tlp-badge-outline">Active</span>
            </td>
            <td class="tlp-table-cell-numeric">12</td>
            <td class="tlp-table-cell-numeric">$98</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-danger tlp-button-outline" href="javascript:;">
                    <i class="fa fa-trash-o"></i> Remove
                </a>
            </td>
        </tr>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">55</a>
            </td>
            <td>Johnny</td>
            <td>Cash</td>
            <td>
                <span class="tlp-badge-success tlp-badge-outline">Active</span>
            </td>
            <td class="tlp-table-cell-numeric">29</td>
            <td class="tlp-table-cell-numeric">$104.45</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-danger tlp-button-outline" href="javascript:;">
                    <i class="fa fa-trash-o"></i> Remove
                </a>
            </td>
        </tr>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">3</a>
            </td>
            <td>Mitch</td>
            <td>Mitchell</td>
            <td>
                <span class="tlp-badge-success tlp-badge-outline">Active</span>
            </td>
            <td class="tlp-table-cell-numeric">89</td>
            <td class="tlp-table-cell-numeric">$250</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-danger tlp-button-outline" href="javascript:;">
                    <i class="fa fa-trash-o"></i> Remove
                </a>
            </td>
        </tr>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">43</a>
            </td>
            <td>John Paul</td>
            <td>Jones</td>
            <td>
                <span class="tlp-badge-danger tlp-badge-outline">Disabled</span>
            </td>
            <td class="tlp-table-cell-numeric">34</td>
            <td class="tlp-table-cell-numeric">$847.90</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-danger tlp-button-outline" href="javascript:;">
                    <i class="fa fa-trash-o"></i> Remove
                </a>
            </td>
        </tr>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">387</a>
            </td>
            <td>John</td>
            <td>Bronze</td>
            <td>
                <span class="tlp-badge-success tlp-badge-outline">Active</span>
            </td>
            <td class="tlp-table-cell-numeric">22</td>
            <td class="tlp-table-cell-numeric">$3</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-danger tlp-button-outline" href="javascript:;">
                    <i class="fa fa-trash-o"></i> Remove
                </a>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th class="tlp-table-cell-numeric">Avg: 37</th>
            <th class="tlp-table-cell-numeric">Sum: $3515.85</th>
            <th></th>
        </tr>
    </tfoot>
</table>
<div class="tlp-pagination">
    <a href="javascript:;" class="tlp-button-primary tlp-button-outline tlp-button-small tlp-pagination-button" role="button" title="Begin">
        <i class="fa fa-angle-double-left"></i>
    </a>
    <a href="javascript:;" class="tlp-button-primary tlp-button-outline tlp-button-small tlp-pagination-button" role="button" title="Previous">
        <i class="fa fa-angle-left"></i>
    </a>

    <span class="tlp-pagination-pages">
        <span class="tlp-pagination-number">51</span>
        –
        <span class="tlp-pagination-number">79</span>
        of
        <span class="tlp-pagination-number">79</span>
    </span>

    <a href="javascript:;" class="tlp-button-primary tlp-button-outline tlp-button-small tlp-pagination-button disabled" role="button" title="Next">
        <i class="fa fa-angle-right"></i>
    </a>
    <a href="javascript:;" class="tlp-button-primary tlp-button-outline tlp-button-small tlp-pagination-button disabled" role="button" title="End">
        <i class="fa fa-angle-double-right"></i>
    </a>
</div>
